import React, { Component } from 'react';

// 01: 引入 Link 组件, 该组件就相当于 Roputer-link 组件, 导航标签,最终解析成a 标签
import { Link } from 'react-router-dom';
// 02: 引入Route组件, 该组件类似Router-view 同时每个组件上有对应的路由规则.

import { Route, withRouter } from 'react-router-dom'
// 引入路由规则组件 Rules
import Ruls from './Ruls';
// 符合路由一切皆组件的思想
// 注意: 一定要 Router 包裹 Link 和 Route
class Father extends Component {
    state = {
        id: 999
    }
    render() {
        return (
            <div>
                {/* 我是路由组件 */}
                {/* 声明式导航 */}
                <Link to='/home?id=100&age=20'><span>首页</span></Link>
                {/* 查询字符串传参 */}
                <Link to={{ pathname: '/category', search: 'name=jack&age=30' }}><span>分类</span></Link>
                {/* 隐式传参 */}
                <Link to={{ pathname: '/car', state: { username: "哈哈", pwd: 123456 } }}><span>购物车</span></Link>
                {/* reseful风格传参 */}
                <Link to={`/mine/${this.state.id}`}><span>我的</span></Link>

                {/* 编程式导航 
                  通过props属性中的hostory, match, location 实现页面的跳转和参数的传递
                  注意:当使用类组件进行页面跳转的时候,该组件实例上的props属性上不一定有hostory, match, location
                  因为只有该组件是通过路由跳转过来的组件才有这三个参数,否则没有
                  使用 withRouter 这个高阶组件强化函数,只需要包裹当前组件即可
                */}
                <p>
                    <span onClick={this.gotopage.bind(this, '/home')}>首页</span>
                    <span onClick={this.gotopage.bind(this, '/category')}>分类</span>
                    <span onClick={this.gotopage.bind(this, '/car')}>购物车</span>
                    <span onClick={this.gotopage.bind(this, '/mine')}>我的</span>
                </p>
                {/* 展示路由规则匹配到的组件 */}
                <Ruls></Ruls>
            </div>
        );
    };
    gotopage(path) {
        console.log(path);
        console.log(this);
        this.props.history.push(path)
    }
}

export default withRouter(Father);



